define(
	[
		'require',
		'echarts',
		'echarts/chart/force',
	],
	function(require){

		var NodeTopo = Ember.Component.extend({

			didInsertElement: function(){
				var view = this;
				var $dom = this.$();

				this.width = this.width||$dom.width();
				this.height = this.height||$dom.height();

				if(this.width === 0 || this.height === 0){
					Ember.assert("必须指定视图的width和height。（可通过样式或width，height属性");
					return;
				}

				this._initChart();

				APM.on("nodesContainerResize", this, "_resizeChart");
				$(window).on("resize."+this.elementId, function(){
					view._resizeChart();
				});
			},

			willDestroyElement: function(){
				this.chart.dispose();
				this.chart = null;
				APM.off("nodesContainerResize");
				$(window).off("resize."+this.elementId);
			},
			/**
			 * 初始化图表
			 */
			_initChart: function(){
				var $dom = this.$();

				if(G_vmlCanvasManager && G_vmlCanvasManager.init){
					G_vmlCanvasManager.initElement($dom[0]);
				}

				var chart = echarts.init($dom[0]);
				this.chart = chart;

				this.dataChange();
			},

			_resizeChart: function(){
				var $dom = this.$();

				this.width = $dom.width();
				this.height = $dom.height();

				this.chart.resize();
			},

			/**
			 * 数据改变后, 刷新图表
			 */
			dataChange: Ember.observer("data", function(){
				if(!this.chart || !this.get("data")){
					return;
				}

				var option = this._getDefaultOption();

				this.option = option;

				this._translateOption(option);

				this.chart.setOption(option, true);
				this.chart.hideLoading();
			}),

			_getDefaultOption: function(){
				return {
					tooltip : {
						trigger: 'item',
						formatter: '{b}'
					},
					series : [
						{
							type:'force',
							name : "节点发现",
							itemStyle: {
								normal: {
									label: {
										show: true,
										textStyle: {
											color: '#333'
										}
									},
									nodeStyle : {
										brushType : 'both',
										borderColor : 'rgba(255,215,0,0.4)',
										borderWidth : 1
									},
									linkStyle: {
										type: 'curve'
									}
								},
								emphasis: {
									label: {
										show: false
									},
									nodeStyle : {
									},
									linkStyle : {}
								}
							},
							linkSymbol: 'arrow',
							minRadius : 25,
							maxRadius : 50,
							nodes:[],
							links : []
						}
					]
				};
			},

			_translateOption: function(option){
				var data = this.get("data"),
					optNodes = option.series[0].nodes,
					optLinks = option.series[0].links;
				data.nodes.forEach(function(node){
					optNodes.push({
						name: node.id,
						label: node.name
					});
				});
				data.relations.forEach(function(rel){
					optLinks.push({
						source: rel.from,
						target: rel.to
					});
				});
			},
		});

		var View = Ember.View.extend({
			classNames: "config-nodes-topo",
			NodeTopo: NodeTopo,

			didInsertElement: function(){
				var view = this;

				view._setHeight();
				$(window).on("resize.noesTopo", function(){
					view._setHeight();
				});
			},

			willDestroyElement: function(){
				$(window).off("resize.noesTopo");
			},

			_setHeight: function(){
				var height = 0;
				if( $("body").hasClass("fullscreen")){
					height = $(window).height();
				}
				else{
					height = $(window).height()-128;
				}
				this.$().css("height", height);
				APM.trigger("nodesContainerResize");
			},
		});

		APM.ConfigNodesTopoView = View;

		return View;
	}
);